<template>
  <div class="wrap">
    <div class="just">
      <div class="t_s">

        <div class="sologan v_center">
          <svg-icon class-name="small_icon v_center" icon-class="result" /> 业绩统计</div>
        <van-radio-group @change="changeData" class="v_center" direction="horizontal" v-model="radio">
          <van-radio name="add">
            新增
            <template #icon="props">
              <svg-icon class-name="small_icon" :icon-class="props.checked ? 'xuanzhong' : 'daixuan'" />
            </template>
          </van-radio>
          <van-radio name="delete">
            解约
            <template #icon="props">
              <svg-icon class-name="small_icon" :icon-class="props.checked ? 'xuanzhong' : 'daixuan'" />
            </template>
          </van-radio>
        </van-radio-group>
        <div class="role_name c_flex">{{$store.getters.userInfo.department_name}}</div>
      </div>
    </div>
    <div class="date_table">
      <div v-for="(item,index) in date" :key="index" class="a">
        <div class="num c_flex">{{item.num}}</div>
        <div class="month c_flex">{{item.month}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  // import {HomeService} from "@/api"
  // import {SectionToChinese} from "@/utils/validate"
  export default {
    name: 'businessTable',
    data() {
      return {
        radio: 'add',
        date: [{
            month: "1月",
            num: "824"
          },
          {
            month: "2月",
            num: "824"
          },
          {
            month: "3月",
            num: "824"
          },
          {
            month: "4月",
            num: "824"
          },
          {
            month: "5月",
            num: "824"
          },
          {
            month: "6月",
            num: "824"
          },
          {
            month: "7月",
            num: "824"
          },
          {
            month: "8月",
            num: "824"
          },
          {
            month: "9月",
            num: "824"
          },
          {
            month: "10月",
            num: "824"
          },
          {
            month: "11月",
            num: "824"
          },
          {
            month: "12月",
            num: "824"
          },
        ]
      }
    },
    mounted () {
      this.initData();
    },
    methods: {
      changeData(){
        this.initData();
      },
      initData() {
        // HomeService.getResult({type:this.radio}).then(res=>{
        //   console.log('getResult:',res)
        //   this.date= res.data.map(item=>{
        //     let out = {};
        //     out.month = SectionToChinese(item.month) +"月";
        //     out.num = item.num;
        //     return out;
        //   });
        // })
      }
    },
  }
</script>

<style lang="less" scoped>
  .wrap {
    margin-top: 32px;
    width: 701.99px;
    height: 738px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;

    .date_table {
      width: 654px;
      height: 584px;
      background-color: rgba(243, 245, 247, 1);
      border-radius: 16px;
      margin-left: 24px;
      padding: 24px;
      display: grid;
      grid-row-gap: 40px;
      grid-column-gap: 54px;
      grid-template-columns: 166px 166px 166px;
      grid-template-rows: 100px 100px 100px 100px;
      grid-template-areas: 'a a a'
        'a a a'
        'a a a'
        'a a a';

      .a {

        background-color: #ffffff;
        border-radius: 16px;
        display: flex;
        flex-direction: column;

        .num {
          border-bottom: 1px rgba(238, 238, 238, 1) solid;
          font-size:28px;
          flex: 5;
          vertical-align: -87px;
        }

        .month {
          flex: 3;
          font-size: 20px;
          color: rgba(102, 102, 102, 1);
          letter-spacing: -0.44px;
        }
      }
    }

    .just {
      display: flex;
      flex-direction: column;
      align-items: center;

      .t_s {
        width: 100%;
        padding: 32px 24px;
        display: flex;

        .sologan {


          flex: 1;
          color: rgba(51, 51, 51, 1);
          font-size: 24px;
          line-height: 1;

        }

        /deep/.van-radio {
          height: 100%;
          margin-right: 35px;
        }

        /deep/.van-radio__icon {
          height: 100%;
          display: flex;
          align-items: center;
        }

        .role_name {
          width: 160px;
          height: 60px;
          background-color: rgba(243, 245, 247, 1);
          border-radius: 16px;
          color: rgba(102, 102, 102, 1);
          font-size: 20px;
        }
      }
    }
  }
</style>